@import "@/style/scss/index.scss";

.expo-module-wrapper {
  height: 100%;
  width: 100%;
  display: inline-block;

  .top-buttons {
    z-index: 1;
    top: 0;
    left: 0;
    justify-content: flex-start;
    margin: 149px auto auto 224px;
    display: flex;
    position: fixed;
    .end-edit-button {
      width: 220px;
      height: 56px;
      background: #FFFFFF;
      box-shadow: 0px 24px 87px 0px rgba(23, 88, 160, 0.36);
      border-radius: 28px;
      span {
        margin: auto;
        line-height: 27px;
        font-size: 24px;
        font-weight: 400;
        color: #1758A0;
      }
    }
    .cancel-edit-button {
      width: 220px;
      height: 56px;
      background: #93C7FF;
      border-radius: 28px;
      span {
        margin: auto;
        line-height: 27px;
        font-size: 24px;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
    .year-button {
      margin-right: 21px;
      width: 220px;
      height: 56px;
      background: #FFFFFF;
      box-shadow: 0px 24px 87px 0px rgba(23, 88, 160, 0.36);
      border-radius: 28px;
      display: flex;
      img {
        margin: auto 54px auto 16px;
        width: 16px;
        height: 9px;
        background: red;
        vertical-align: bottom;
      }
      span {
        margin: auto 0 auto auto;
        line-height: 27px;
        font-size: 24px;
        font-weight: 400;
        color: #1758A0;
      }
      &:hover {
        cursor: pointer;
      }
    }
    .editable-button {
      position: relative;
    }
    .creat-button {
      margin-left: 27px;
      position: relative;
    }
  }

  .bottom-buttons {
    top: 974px;
    left: 1389px;
  }

  .module-content {
    width: 100%;
    height: 100%;
    .center-text {
      height: 56px;
      background: #FFFFFF;
      border-radius: 28px;
      width: fit-content;
      position: relative;
      margin: auto;
      z-index: 1;
      top: 341px;
      bottom: 0;
      left: 0;
      right: 0;
      span {
        margin: auto 44px;
        font-size: 32px;
        font-weight: bold;
        color: #78B8FE;
        line-height: 56px;
      }
    }
    .center-grid {
      width: 840px;
      height: 430px;
      position: fixed;
      left: 580px;
      right: 0;
      top: 346px;
      bottom: 0;
      margin: 0 auto auto 0;
      .center-bg {
        height: 100%;
        width: 100%;
        position: absolute;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .center-item {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .center-img {
          width: 357px;
          height: 72.6%;
          margin: -30px auto 20px auto;
          position: relative;
          .module-center-bottom {
            width: 357px;
            height: 58.28%;
            bottom: -29.14%;
            position: absolute;
            object-fit: contain;
            z-index: 1;
          }
          .module-center-top {
            height: 100%;
            width: 357px;
            margin: 0 auto auto;
            left: 0;
            right: 0;
            position: absolute;
            object-fit: contain;
          }
        }
      }
    }
    .module-list {
      display: flex;
      width: 1500px;
      height: 883px;
      top: 120px;
      left: 0;
      right: 0;
      margin: 0 auto auto auto;
      position: absolute;
      .module-list-group {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row wrap;
        .module-grid i {
          cursor: pointer;
        }
        .module-grid {
          width: 200px;
          height: min-content;
          position: relative;
          &.editable {
            cursor: move;
          }
          // &.ignoreElements {
          //   //display: none;
          // }
          .module-img {
            height: 213px;
            width: 100%;
            position: relative;
            .module-img-top {
              height: 120px;
              width: 120px;
              margin: 0 auto auto;
              left: 0;
              right: 0;
              position: absolute;
            }
            .module-img-bottom {
              width: 200px;
              height: 153px;
              bottom: 0;
              position: absolute;
            }
          }
          .module-name {
            margin: auto;
            width: fit-content;
            span {
              margin: auto;
              text-align: center;
              font-size: 24px;
              font-weight: bold;
              color: #FFFFFF;
              display: inline-block;
              white-space: nowrap;
            }
          }
          .module-actions {
            display: flex;
            justify-content: space-between;
            width: 154px;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            .module-edit {
              width: 40px;
              height: 40px;
              border-radius: 20px;
              background: linear-gradient(-24deg, #2BA886, #61E1CC);
              img {
                height: 24px;
                width: 24px;
              }
            }
            .module-download {
              width: 40px;
              height: 40px;
              background: linear-gradient(-24deg, #5477FF, #99A1FF);
              border-radius: 20px;
              img {
                height: 24px;
                width: 24px;
              }
            }
            .module-delete {
              width: 40px;
              height: 40px;
              background: linear-gradient(-24deg, #FF606B, #FF8585);
              border-radius: 20px;
              img {
                height: 24px;
                width: 24px;
              }
            }
          }
          &:nth-child(1) {
            margin-top: auto;
            bottom: -43px;
            margin-left: 0;
          }
          &:nth-child(2) {
            margin-top: 106px;
            margin-left: -29px;
          }
          &:nth-child(3) {
            margin-left: 112px;
          }
          &:nth-child(4) {
            margin-left: 195px;
          }
          &:nth-child(5) {
            margin-left: 132px;
            margin-top: 106px;
          }
          &:nth-child(6) {
            top: -193px;
            left: calc(100% - 102px);
          }
          &:nth-child(7) {
            top: -20px;
            margin-left: 0;
          }
          &:nth-child(8) {
            margin-top: auto;
            margin-left: 86px;
          }
          &:nth-child(9) {
            margin-top: auto;
            margin-left: 194px;
          }
          &:nth-child(10) {
            top: -20px;
            margin-left: 120px;
          }
          &:nth-child(11) {
            display: none;
            height: 0 !important;
            width: 0 !important;
            position: absolute;
          }
          &:nth-child(12) {
            display: none;
            height: 0 !important;
            width: 0 !important;
            position: absolute;
          }
        }
      }
      &.single-line {
        height: 442px;
      }
    }
  }
}

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
